<template>
  <div>
    <!-- 轮播图 -->
    <div class="bg">
      <el-carousel class="el-carousel">
        <el-carousel-item v-for="item in bgList" :key="item.id">
          <img :src="baseUrl+item.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>

      <div class="mask">
        <span class="title">汉江水环境监测中心综合业务平台</span>
        <span>行为公正，数据准确，持续改进，优质服务</span>
      </div>
    </div>

    <!-- 系统模块 -->
    <div class="moduel">
      <div class="body">
        <div class="function-area" @click="toHomeInfo(1)">
          <img src="../../../assets/images/3dsystem.png" alt="">
          <span>3D智慧化运维系统</span>
        </div>
        <div class="function-area" @click="toHomeInfo(2)">
          <img src="../../../assets/images/limsSystem.png" alt="">
          <span>实验室智慧管理系统</span>
        </div>
        <div class="function-area" @click="toNumSystem()">
          <img src="../../../assets/images/numberSystem.png" alt="">
          <span>数字孪生系统</span>
        </div>
       </div>
       <!-- <div class="title"> 汉江水环境监测中心综合业务平台</div> -->
       <!-- <div class="line"></div> -->
    </div>
    <!-- 通知公告 -->
    <div class="info">
      <div class="title">通知公告</div>
      <div class="line">
        <span @click="toNewTab('notes')">MORE+</span>
      </div>
      <div class="body">
        <div class="function-area" v-for="(item,index) in notesList"
              :key="index" @click="navTo('/hj-home/notes/detail/'+item.id)">
          <div class="left">
            <span>{{item.createdAt.substring(8,10)}}</span>
            <span v-if="item.createdAt.substring(5,6) == 0 "> {{item.createdAt.substring(6,7)}}月</span>
            <span v-else-if="item.createdAt.substring(5,6) != 0 "> {{item.createdAt.substring(5,7)}}月</span>
          </div>
          <div class="right">
            <span class="info-title" v-html="item.name"></span>
            <span class="info-content" v-html="item.content"></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 规章制度 -->
    <div class="rules">
      <div class="title">规章制度</div>
      <div class="line">
        <span @click="toNewTab('hcsmng')">MORE+</span>
      </div>
      <div class="body">
        <div class="function-area" v-for="(item,index) in hcsmngList"
              :key="index" @click="navTo('/hj-home/hcsmng/detail/'+item.id)">
          <div class="up">
            <span>{{item.createdAt.substring(8,10)}}</span>
            <span v-if="item.createdAt.substring(5,6) == 0 "> {{item.createdAt.substring(6,7)}}月</span>
            <span v-else-if="item.createdAt.substring(5,6) != 0 "> {{item.createdAt.substring(5,7)}}月</span>
          </div>
          <div class="down">
            <span class="rules-title" v-html="item.name"></span>
            <span class="rules-content" v-html="item.content"></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 连接 -->
    <div class="link">
      <div class="body">
        <div class="content" v-for="(item,index) in linkList" :key="index"  @click="linkTO(item)" >
          <img :src="baseUrl+item.imageUrl"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { notesList } from '@/api/web/notes.js'
import { hcsmngList }  from '@/api/web/hcsmng.js'
import { linkList } from '@/api/web/link.js'
import { bgList } from '@/api/web/bg.js'

export default {
  data() {
    return {
      bgList: [
        // {
        //   id: 1,
        //   url: require("../../../assets/images/bg.png")
        // },
        // {
        //   id: 2,
        //   url: require("../../../assets/images/bg2.png")
        // },
        // {
        //   id: 3,
        //   url: require("../../../assets/images/bg3.png")
        // },
        // {
        //   id: 4,
        //   url: require("../../../assets/images/bg4.jpeg")
        // },
        // {
        //   id: 5,
        //   url: require("../../../assets/images/bg5.jpeg")
        // },
        // {
        //   id: 6,
        //   url: require("../../../assets/images/bg6.jpeg")
        // }
      ],
      notesList:[],
      hcsmngList:[],
      linkpic:[],
      linkList:[],
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },

  created() {
    this.queryList()

  },

  methods: {
    async queryList(){
      const bgRes = await bgList({
        page: 0,
        size: 20,
        // sort: 'createdAt,desc',
      })
      this.bgList=bgRes.content
      const notesRes = await notesList({
        page: 0,
        size: 3,
        })
        // notesRes.content.sort(this.sortByOrder('order')).splice(3)
        this.notesList = notesRes.content
      const hcsmngRes = await hcsmngList({
      page: 0,
      size: 3,
      })
      // hcsmngRes.content.sort(this.sortByOrder('order')).splice(3)
      this.hcsmngList = hcsmngRes.content
      const linkRes = await linkList({
      page: 0,
      size: 30,
      })
      this.linkList = linkRes.content
    },
    // sortByOrder(field){
    //   return function(a,b){
    //     return a[field]-b[field]
    //   }
    // },
    toHomeInfo(type)
    {
      localStorage.setItem("home-info-type", type);
      this.$router.push({'name':'home-info'})
    },
    toNumSystem(){
      window.open('http://10.6.57.97:8190', '_blank')
    },
    toNewTab(name) {
      const routeData = this.$router.resolve({ name })
      this.$router.push(routeData.location.path)
    },
    linkTO(item){
      window.open(item.url, '_blank')
    }
  }
};
</script>

<style scoped lang="scss">
.bg {
  position: relative;
  margin-top: 0;
  height: 730px;
  .el-carousel ::v-deep {
    height: 100%;
    .el-carousel__container,
    .el-carousel--horizontal {
      height: 100% !important;
    }
    img {
      width: 100%;
      height: inherit;
    }
  }

  .mask {
    padding-top: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 58%;
    height: 312px;
    border-radius: 20px;
    z-index: 99;
    position: absolute;
    bottom: 0;
    left: 21%;
    background-color: rgba(0,0,0,.3);
    font-size: 25px;
    color: #fff;
    .title {
      font-size: 35px;
      margin-bottom: 22px;
    }
  }
}
.function-area:hover {
    transform: translate(0, -15px);
    transition: transform .5s ease-in-out;
    box-shadow: 0 10px 20px 1px rgba(49, 49, 49, 0.2);
  }
.moduel {
  position: relative;
  height: 680px;
  z-index: 99;
  .title {
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    margin-top: 60px;
  }
  .line{
    border-top:5px solid #074489;
    width: 94px;
    margin: -56px auto;
  }
  .body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -100px auto;
    width: 988px;
    div {
      transition: transform .5s ease-in-out;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 260px;
      height: 222px;
      border-radius: 13px;
      box-shadow: 2px 1px 10px 0px rgba(0,0,0,.3);
      background-color: #fff;
      img {
        width: 149px;
        height: 149px;
        // margin-bottom: 26px;
      }
      span {
        font-size: 24px;
      }

    }
    &:nth-child(2) div {
      margin: 0 56px;
    }
  }
}

.info {

  height: 540px;
  background: url('../../../assets/images/bg_info.png') no-repeat center;
  background-size: cover;
  background-color:rgba(232, 233, 237, 1);
   .title {
    height: 170px;
    line-height: 170px;
    text-align: center;
     font-size: 35px;
     font-weight: bold;
   }
   .line{
    border-top:5px solid #074489;
    width: 94px;
    margin: -48px auto;

    span{
      width: 281px;
      height: 25px;
      margin-left: 500px;
      font-size: 18px;
      cursor: pointer;
    }
   }
   .body{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1372px;
    margin: 100px auto;
    >div{
      padding: 42px 28px 28px;
      transition: transform .5s ease-in-out;
      display: flex;
      width: 400px;
      height: 190px;
      border-radius: 13px;
      box-shadow: 2px 1px 10px 0px rgba(0,0,0,.3);
    }
    .left{
      width: 39px;
      height: 42px;
      background: #074489;
      border-radius: 4px;
      font-size: 16px;
      padding: 5px;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 10px;
      box-sizing: content-box;
    }
    .right{
      flex: 1;
      .info-title{
        width: 100%;
        // height: 60px;
        margin-bottom: 5px;
        font-size: 20px;
        line-height: 25px;
        font-weight: bold;
        color: #000000;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
      .info-content{
        line-height: 22px;
        height: 66px;
        width: 280px;
        font-size: 14px;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
      }
    }
  }
}

.rules {
  height: 540px;
   .title {
    height: 170px;
    line-height: 170px;
    text-align: center;
     font-size: 35px;
     font-weight: bold;
   }
  .line{
    border-top:5px solid #074489;
    width: 94px;
    margin: -48px auto;

    span{
      width: 281px;
      height: 25px;
      margin-left: 500px;
      font-size: 18px;
      cursor: pointer;
    }
   }
   .body{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 100px auto;
    width: 1368px;
    >div{
      transition: transform .5s ease-in-out;
      display: flex;
      width: 380px;
      height: 240px;
      border-radius: 13px;
      box-shadow: 2px 1px 10px 0px rgba(0,0,0,.3);
      flex-direction: column;
      align-items: center;
      padding: 18px 28px 28px;
    }
    .up{
      height: 80px;
      border-radius: 4px;
      margin: 0 auto 10px;
      font-size: 16px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #707070;
      span:nth-child(1) {
        color: #074489;
        font-size: 36px;
        font-weight: bold;
      }
    }
    .down{
      display: flex;
      flex-direction: column;
      align-items: center;
      .rules-title{
        font-size: 20px;
        font-weight: bold;
        color: #000000;
        line-height: 25px;
        display:block;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        margin-bottom: 10px;
      }
      .rules-content{
        height: 45px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
        display:block;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        padding: 3px;
      }
    }
  }
}
.link {
  min-height: 323px;
  width: 100%;
  background-color: #EBEDF3;
  // position: relative;
  .body{
    width: 1264px;
    margin: 0 auto;
    padding: 74px 0;
    display:flex;
    flex-wrap:wrap;
    .content {
      width: 25%;
      height: 74px;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 201px;
        height: 100%;
      }
    }

  }
}
</style>
